<template>
  <div class="verify-container">
    <div class="verify-bg" />
    <div class="verify-content1">
      <img src="@/assets/img/verify1.jpeg" />
      <h1>招商方向</h1>
      <div class="verify-divider" />
      <span>尊敬的匠人老师，如果您是手工艺匠人、非遗传承人、老字号、独立设计师、自主品牌等，我们诚意邀您的加入，与我们携手打造最强东方美学平台。网站针对以下6大类目开放招商：</span>
      <div class="verify-cate-box">
        <div class="verify-cate-item">
          <h3>珠宝首饰</h3>
          <div class="verify-divider2" />
          <div class="v-cata-des-box">
            <div class="v-cate-des">发饰；戒指；手链；手镯；手串；耳饰；项饰；胸针；脚链；袖扣；珠宝玉石把件。</div>
            <img src="@/assets/img/icon/necklace.png" />
          </div>
        </div>
        <div class="verify-cate-item">
          <h3>文化艺术</h3>
          <div class="verify-divider2" />
          <div class="v-cata-des-box">
            <div class="v-cate-des">金石篆刻；传统乐器；民俗工艺（如：皮影、年画、泥塑、剪纸、鼻烟壶等）；文房用品；棋艺；兵器、中国书画。</div>
            <img src="@/assets/img/icon/fan.png" />
          </div>
        </div>
        <div class="verify-cate-item">
          <h3>茶器</h3>
          <div class="verify-divider2" />
          <div class="v-cata-des-box">
            <div class="v-cate-des">茶壶；盖碗；茶盘；茶刀/茶针；茶炉；茶垫/茶托；茶匙/茶勺；公道杯；品茗杯/茶杯；茶具套装；茶漏；茶席等。</div>
            <img src="@/assets/img/icon/teapot.png" />
          </div>
        </div>
        <div class="verify-cate-item">
          <h3>茶叶</h3>
          <div class="verify-divider2" />
          <div class="v-cata-des-box">
            <div class="v-cate-des">绿茶类；普洱类；黄茶类；白茶类；红茶类；黑茶类；花茶类；乌龙茶/青茶类。</div>
            <img src="@/assets/img/icon/leaves.png" />
          </div>
        </div>
        <div class="verify-cate-item">
          <h3>家具家居</h3>
          <div class="verify-divider2" />
          <div class="v-cata-des-box">
            <div class="v-cate-des">餐饮具；日用品；家居饰品（如灯具、摆件、装饰画、盆景）；居家布艺（桌布、抱枕、地毯、床品等）；文具等。</div>
            <img src="@/assets/img/icon/furniture.png" />
          </div>
        </div>
        <div class="verify-cate-item">
          <h3>服饰</h3>
          <div class="verify-divider2" />
          <div class="v-cata-des-box">
            <div class="v-cate-des">女装/女鞋类；男装/男鞋类；童装/童鞋类；箱包类；帽子/围巾/袖扣/腰带等服饰配件类；传统汉服类。</div>
            <img src="@/assets/img/icon/clothes.png" />
          </div>
        </div>
      </div>
    </div>
    <div class="verify-content2">
      <h1>认证优势</h1>
      <div class="verify-divider" />
      <div class="verify-items">
        <div class="verify-item">
          <img src="@/assets/img/verify2.png" />
          <h3>免费开店</h3>
          <span>打破地域、时间局限，实现您的产品直达用户</span>
        </div>

        <div class="verify-item">
          <img src="@/assets/img/verify4.png" />
          <h3>免费高阶培训</h3>
          <span>包括但不限于静物摄影、文案、营销策划等</span>
        </div>
        <div class="verify-item">
          <img src="@/assets/img/verify3.png" />
          <h3>24小时咨询热线</h3>
          <span>随时随地解答您对开店、交易、网站使用等各方面的问题</span>
        </div>
      </div>
    </div>
    <div class="verify-content3">
      <h1>认证流程</h1>
      <div class="verify-divider" />

      <Steps :current="current">
        <Step title="注册账号" />
        <Step title="签订协议" />
        <Step title="提交资料" />
        <Step title="资料审核" />
        <Step title="入驻成功" />
      </Steps>

      <div class="hidden-form" :class="{show:formShow}">
        <Form :model="applyForm" :label-width="80">
          <Row>
            <Col span="11">
              <FormItem label="申请称号" prop="rank">
                <Input
                  v-model="applyForm.rank"
                  maxlength="10"
                  show-word-limit
                  placeholder="通过认证后将显示在您的个人主页上"
                ></Input>
              </FormItem>
              <FormItem label="主营类目" prop="city">
                <Select
                  v-model="applyForm.zone"
                  placeholder="选择您所属的圈子"
                  required
                  style="text-align: left"
                >
                  <Option v-for="zone in zoneList" :key="zone.id" :value="zone.id">{{zone.title}}</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="11" offset="2">
              <FormItem prop="file">
                <Upload
                  type="drag"
                  action="#"
                  :show-upload-list="false"
                  :before-upload="beforeUpload"
                  :format="['jpg', 'png','jpeg']"
                  :max-size="5120"
                >
                  <div style="padding: 10px 0">
                    <Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
                    <p v-if="!applyForm.file">上传证书</p>
                    <p v-else>{{applyForm.file.name}}</p>
                  </div>
                </Upload>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
      <Button type="error" size="large" @click="handleApply()" :loading="loading">
        <span v-if="current == 0">立即认证</span>
        <span v-else-if="current == 1">查看协议</span>
        <span v-else-if="current == 2">提交资料</span>
        <span v-else>资料审核中...</span>
      </Button>

      <Modal v-model="agreementModal" width="720">
        <p slot="header" style="color:#f60;text-align:center">
          <Icon type="ios-information-circle"></Icon>
          <span>“匠心”平台服务协议</span>
        </p>
        <div>
          <p>感谢您使用本平台为匠人提供的服务，我们希望本协议成为您与本平台长期合作的良好基础，并共同为精良手艺与优秀传统的传承与发展而携手努力。</p>
          <p>【请重点阅读】您在同意本协议之前，请认真阅读本协议。请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款、法律适用和争议解决条款。免除或者限制责任等重点条款将以粗体下划线标识，您应重点阅读。如您对协议有任何疑问，可向本平台客服咨询。</p>
          <p>【签约动作】当您按照网络页面提示填写信息、阅读并同意本协议且完成全部入驻程序后，即表示您已充分阅读、理解并接受本协议的全部内容，并与本平台达成一致，成为本平台“匠人”。如果您需要纸质的协议，则可申请本平台向您寄送本协议的纸质版本并加盖印章。</p>
          <p>【协商一致】您了解，由于本平台服务的匠人数量众多，为了提高效率，您与本平台都同意采用电子化签约方式，但这并不妨碍您与本平台对协议条款进行协商。如果您需要商议条款，则可以通过本平台客服进行咨询。如果您认为无法与本平台达成一致，包括无法接受本平台后续对本协议的修改，则您有权决定拒绝使用或继续使用本平台的服务。而如果您已经按照【签约动作】进行操作或适用本平台服务，则本协议将作为双方协商一致的合同发生法律效力。</p>
          <p>一、定义</p>
          <p>1.1、“匠人” ：指依据本平台入驻流程和要求完成信息及资质提交，经本平台审核后，在本平台上进行经营活动的自然人或实体。匠人在本平台上进行商品或服务销售时，即为平台卖家。</p>
          <p>1.2、“消费者”：指于本平台购买商品或服务并用于消费的任何自然人或实体，亦可称为“买家”。</p>
          <p>1.3、“本平台账户”：指匠人经本平台同意而获得的使用服务的独占编号（编号之间互不相同），又称“本平台用户ID”。</p>
          <p>1.4、“服务” ：是指由本平台向匠人提供的互联网信息服务及与此相关的软件技术服务等。</p>
          <p>1.5、“服务开通” ：指匠人登陆本平台完成信息提交、协议签署后，经审核通过，本平台允许匠人于本平台开设店铺、使用本平台服务的过程。</p>
          <p>1.6、“其他服务”：指本平台向匠人提供的其他信息服务或软件技术服务，具体服务项目由双方另行约定。如果有关服务是第三方通过本平台向您提供的，则将由该等第三方与您签署有关服务协议。</p>
          <p>二、相关协议以及本协议附件</p>
          <p>2.1、本协议后附的《消费者权益保护规则》、《入驻与清退规则》、《服务费计费规则》关系到消费者权益保护以及匠人重要权益，请您重点阅读。并不是所有的规则都会以附件形式列在本协议之后，本平台将通过邮件、站内公告等形式提前公布规则，对于影响匠人权利义务的变更本平台将提前至少7个工作日在本平台进行公示。</p>
          <p>2.2、本协议内容包括协议正文及所有本平台已经发布的或将来发布并依法通知匠人的各类规则。本平台发布规则或对规则进行调整视为对本协议的补充或修改，您同意本平台有权发起对本协议的补充或修改，如果您拒绝接受，则有权停止使用本平台服务，但如果您继续使用本平台提供的各项服务的，则表示您接受并将各项规则的规定。</p>
          <p>2.3、你在申请成为匠人之前，已经签署的《本平台用户协议》或其他协议仍然是有效的。</p>
          <p>三、本平台服务与费用</p>
          <p>3.1、本平台提供的服务及收费：</p>
          <p>（1）本平台为匠人提供与互联网信息服务相关的软件技术服务，包括但不限于搜索商品、生成订单、管理交易和完成支付的软件系统。 本平台向匠人收取软件技术服务费，该费用由平台基础服务费、平台活动服务费两部分组成。有关费率依照附件《服务费计费规则》执行。</p>
          <p>（2）服务费用的收取：本平台将根据订单实际支付金额，实时划扣服务费。交易金额以本平台技术后台记录的匠人交易额为准。</p>
          <p>（3）退费：如发生退货且匠人无过错，则本平台将在证实退货退款属实后向匠人退还因此退货交易收取的实时划扣软件技术服务费，但仅限于消费者和匠人通过本平台线上退款系统完成的退货退款。匠人对消费者进行线下退款的,无论商家提供何种证据证明与退货相关的退款确实发生,本平台均不支持向匠人退还就退款部分已收取的实时划扣软件技术服务费。</p>
          <p>3.2、服务费用发生后，匠人可向本平台提交开票申请，本平台将在收到申请后，开具相应金额和对应类型的服务费增值税发票。</p>
          <p>3.3、保证金 ：本平台暂时收取部分保证金，包括但不限于“众筹”，“押窑”等活动及其他。如有调整，届时本平台将通过邮件、站内公告等形式提前公布保证金政策及保证金规则，并签订相关补充协议。</p>
          <p>四、交易款项的结算与管理</p>
          <p>4.1、买卖双方需通过“本平台”平台进行交易，本平台负责货款结算管理，即货款须支付至本平台指定的第三方支付平台账户或本平台指定的银行账户中。</p>
          <p>4.2、交易手续费：在卖家和买家的交易成功后，匠人需要缴纳第三方支付平台（如支付宝、微信等）或银行系统的交易手续费，该手续费目前由本平台代付。如后续需匠人承担交易手续费，则本平台将发布有关规则。</p>
          <p>4.3、买家确认收货后，匠人可进行提现申请。本平台根据协议结算方式给予结算，一般七个工作日后可以到账。</p>
          <p>4.4、匠人须向本平台提供其指定的结算账户或银行账户以便本平台完成货款结算。若匠人账户信息变更，应提前3个工作日通知本平台，否则，因匠人变更账户造成货款支付失败、迟延或错误，损失由匠人自行承担。</p>
          <p>4.5、本平台提供的软件技术服务促成交易双方的交易，当交易的合同关系属于买卖双方。匠人作为卖家应当独立负责履行卖方职责，包括但不限于向买家开具发票，承担交易相关的税费等。</p>
          <p>五、本平台的权利和义务</p>
          <p>5.1、本平台有义务在现有技术上维护整个本平台的正常运行，使匠人线上交易活动得以顺利进行。本平台可以根据匠人的经营范围、匠人取得的品牌授权范围以及匠人对自己店铺经营范围的描述决定或调整允许匠人发布商品的类目、种类和数量。</p>
          <p>5.2、对匠人在注册使用服务中所遇到的与交易或注册有关的问题及反映的情况，本平台应及时作出回复。</p>
          <p>5.3、因线上交易平台的特殊性，本平台没有义务对所有匠人的交易行为以及与交易有关的其它事项进行事先审查，但下列情况除外，事先审查并不意味本平台对审查通过的匠人信息进行了确认或担保：</p>
          <p>（1）第三方通知本平台，认为某个具体匠人或具体交易事项可能存在重大问题；</p>
          <p>（2）匠人或第三方向本平台告知交易平台上有违法或不当行为的；</p>
          <p>（3）本平台发现某个具体匠人或具体交易事项可能存在重大问题。本平台以普通非专业人员的知识水平标准对相关内容进行判别，可以认为这些内容或行为具有违法或不当性质的，本平台有权根据不同情况选择删除相关信息、对匠人店铺采取限制性措施或停止对该匠人提供服务。</p>
          <p>（4）经国家生效法律文书或行政处罚决定确认匠人存在违法行为，或者本平台有事实依据可以认定匠人存在违法或违反协议行为的，本平台有权在本平台公布匠人的违法和/或违规行为。</p>
          <p>5.4、对于匠人在本平台发布的下列各类信息，本平台有权在不通知匠人的前提下进行删除或采取其它限制性措施，包括但不限于：</p>
          <p>（1）本平台有理由相信以规避本平台费用为目的的信息；</p>
          <p>（2）本平台有理由相信以炒作信用、销量为目的的信息；</p>
          <p>（3）本平台有理由相信存在欺诈等恶意或虚假内容的信息；</p>
          <p>（4）本平台有理由相信与网上交易无关或不是以交易为目的的信息；</p>
          <p>（5）本平台有理由相信存在恶意竞价或其它试图扰乱正常交易秩序因素的信息；</p>
          <p>（6）本平台有理由相信属违反公共利益或可能严重损害本平台和/或其它用户合法利益的信息。</p>
          <p>5.5、本平台有权决定在全平台禁售经质量抽检证明为不合格的产品。关于抽检的方式、适用的检测标准和检测结果的认定以本平台相关规则的规定为准。</p>
        </div>
        <div slot="footer">
          <Row>
            <Col span="9">
              <Button type="default" size="large" long @click="agreementModal = false">不同意</Button>
            </Col>
            <Col span="14" offset="1">
              <Button type="error" size="large" long @click="confirm()">我已阅读完毕，同意协议</Button>
            </Col>
          </Row>
        </div>
      </Modal>
    </div>
  </div>
</template>

<script>
import { AuthCheck } from "../utils/mixin";

export default {
  name: "verify",
  mixins: [AuthCheck],
  data() {
    return {
      current: -1,
      zoneList: [],
      formShow: false,
      agreementModal: false,
      loading: false,
      applyForm: {
        zone: "",
        rank: "",
        file: ""
      }
    };
  },
  mounted() {
    if (this.checkLogin()) {
      this.axios
        .post(`/api/apply?type=check`, { uid: this.$store.state.uid })
        .then(res => {
          if (res.data.length) {
            this.current = 3;
            this.loading = true;
          } else {
            this.axios.get("api/zone").then(res => (this.zoneList = res.data));
            this.current = 1;
          }
        });
    } else this.current = 0;
  },
  methods: {
    handleApply() {
      if (!this.checkLogin()) {
        this.$Message.error("请先登录后再进行操作");
      } else if (this.current == 1) {
        this.agreementModal = true;
      } else if (!this.formShow) this.formShow = true;
      else if (
        this.applyForm.zone == "" ||
        this.applyForm.rank == "" ||
        this.applyForm.file == ""
      )
        this.$Message.error("请正确填写所需信息并上传证书");
      else {
        let newFormData = new FormData();
        newFormData.append("uid", this.$store.state.uid);
        newFormData.append("zid", this.applyForm.zone);
        newFormData.append("rank", this.applyForm.rank);
        newFormData.append("image_src", this.applyForm.file);
        this.axios
          .post(`/api/apply`, newFormData, {
            headers: {
              "Content-Type": "multipart/form-data"
            }
          })
          .then(res => {
            this.$Notice.success({title:'提交成功'});
            this.current = 3;
            this.formShow = false;
            this.loading = true;
          });
      }
    },
    confirm() {
      this.agreementModal = false;
      this.current = 2;
    },
    beforeUpload(file) {
      this.applyForm.file = file;
      return false;
    }
  }
};
</script>
